<template>
  <div
    ref="pref"
    :class="[`natal-chart__palace natal-chart__palace__${ dizhiCode }`, {'natal-chart-active':  currentCode.indexOf(dizhiCode) !== -1, 'natal-chart-active-first':  (currentCode.length > 0 && currentCode[0] === dizhiCode)}]"
    :style="{ gridArea: dizhiCode }"
    @click="(e) => onClick(e)"
  >
    <div class="palace-stars">
      <div class="palace-star palace-star__main" v-for="star in mainStars" :key="star.code">
        <span>{{ star.name }}</span>
        <span class="star-jiaji">{{ star.jiaji }}</span>
        <span class="star-sihua">{{ star.sihua }}</span>
      </div>

      <div class="palace-star palace-star__sub" v-for="star in subStars" :key="star.code">
        <span>{{ star.name }}</span>
        <span class="star-sihua">{{ star.sihua }}</span>
      </div>
      <div class="palace-star palace-star__small" v-for="(star, index) in smallStars" :key="star.code">
        <span>{{ star.name }}</span>
      </div>
    </div>

    <div class="palace-info">
      <div class="info palace-name">
        {{ name }}
      </div>
      <div class="info flow-years">
        {{ flowYear }} <span v-if="isBody" class="star-shen">身</span>
      </div>
      <div class="info tiangan-dizhi">
        {{ tiangan + dizhi }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  inheritAttrs: false
}
</script>
<script setup>
import { ref, reactive, onMounted, defineEmits, inject } from 'vue';
const props = defineProps({
  dizhiCode: String,
  code: String,
  dizhi: String,
  tiangan: String,
  isFate: Boolean,
  isBody: Boolean,
  name: String,
  mainStars: Array,
  subStars: Array,
  smallStars: Array,
  flowYear: String,
  currentCode: Array
})

const pref = ref(null)
const { pRefs, addRef } = inject('prefs')
addRef(props.dizhiCode, pref)

const emits = defineEmits(['click'])
const onClick = (e) => {
  emits('click', e)
}
</script>

<style>
  .natal-chart__palace {
    position: relative;
    z-index: 9;
    font-size: 1rem;
    background-color: #fff;
    box-sizing: border-box;
    border: 1px solid #D2B490;
    padding: 0.4rem;
  }
  .natal-chart-active{
    background-color: rgba(255, 245, 233, 0.8);
  }
  .natal-chart-active-first{
    background-color: rgba(211,227,253, 0.5);
  }
  .palace-stars {
    height: 50%;
    display: flex;
  }
  .star-sihua {
    color: #fff;
    margin-top: .3rem;
    background-color: rgb(255, 29, 67);
    border-radius: 4px;
  }
  .star-jiaji {
    color: #fff;
    margin-top: .3rem;
    background-color: rgb(255, 174, 37);
    border-radius: 4px;
  }
  .star-shen {
    color: #fff;
    margin-top: .3rem;
    background-color: #0085cd;
    border-radius: 4px;
  }
  .palace-star {
    line-height: 1.3;
    writing-mode: vertical-lr;
  }
  .palace-star__main {
    color: rgb(193, 83, 5);
  }
  .palace-star__sub {
    color:rgb(200, 88, 200);
  }
  .palace-star__small {
    color: rgb(67, 127, 239);
  }

  /* 宫信息 */
  .palace-info {
    height: 50%;
    position: relative;
  }
  .info {
    text-align: center;
    position: absolute;
  }
  .palace-name {
    width: 3rem;
    /* font-size: 1rem; */
    /*background-color:rgb(0, 133, 205);*/
    background-color: #A2936E;
    border-radius: 4px;
    color: #fff;
    bottom: .1rem;
    left: 0.2rem;
    /*left: 50%;*/
    /*transform: translateX(-50%);*/
  }
  .tiangan-dizhi {
    bottom: 0;
    right: 0;
    font-size: 1.1rem;
    /* font-weight: bold; */
  }
  .van-row {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
  }
</style>
